<template>
 <div>
   <city-header></city-header>
   <city-search :cities="cities"></city-search>
   <city-list :hotCities="hotCities"
    :cities="cities"
    :letter="letter"
     ></city-list>
   <city-Alphabet :cities="cities" @change="letterChange"></city-Alphabet>
 </div>
</template>
<script>
import CityHeader from "./component/header"
import CitySearch from "./component/search"
import CityList from "./component/list"
import CityAlphabet from "./component/alphabet"
import axios from "axios"
 export default {
   data () {
     return {
       hotCities:[],
       cities:{},
       letter:""
     }
   },
   mounted(){
     this.getCityInfo()
   },
   methods:{
     getCityInfo(){
      axios.get("/api/city.json")
        .then(this.getCityInfoSucc)
     },
     getCityInfoSucc(res){
        res=res.data
        if(res.ret&&res.data){
          let data=res.data
          this.cities=data.cities
          this.hotCities=data.hotCities
          
        }
     },
     letterChange(e){
        this.letter=e
     }
   },
   components: {
     CityHeader,
     CitySearch,
     CityList,
     CityAlphabet
   }
 }
</script>
<style>
</style>
